iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
4

知道了使用者需求,我們就可以開始設計功能,有幾個工具能幫助我們,今天介紹第一種 Functional Map。

其實 functional map 也就是一個心智圖而已,每一個功能是一個節點,這個時候你就要以工程師的專業,事先預想有什麼檯面上以及背後運行的功能要建立,我需要得到什麼資訊才能讓功能運轉,方便事先告知後端工程師準備適當的API。同時也理清操作上的細節,有不清楚的地方趁開始做之前和客戶確認。

我是參考 Akene 設計師的文章來製作簡易的 functional map,在一個頁面上分「目標」、「功能」、「資訊」三個節點來發想。任何一套心智圖軟體都可以使用,我們的重點在有視覺化的圖案能和別人討論,這份心智圖大概也只有自己會編輯,網路上有許多免費的資源可以借來用,像是 CoggleMindMeister,或者下載的軟體像是 XMindMindNode。如果你的美術能力超群,甚至用筆畫也行。我自己是使用 MindNode.

「目標」其實就是前面的 user stories。我會把每一個使用者需求增加在「目標」下面,每個需求下是完成需求會經過的步驟。然後我會把這些使用者行為整合起來,增加在「功能」節點之下,大功能下面又拆成不等的小功能。要達到所有的功能,我們需要什麼資料,我會依照頁面或是元件來區分,用這個去和後端工程師說明,請他設計適合的API。

https://ithelp.ithome.com.tw/upload/images/20171206/20091606YPLKsw1fqz.png

製作 functional map 的原則就是要「快」!因為我們的職稱是工程師,主管要看我們寫程式碼而不是畫圖,所以我只會用 15 到 30 分鐘快速的做出 functional map,順便理清我對網站的想法,然後拿著圖和主管討論。

我在A公司這個案子就畫了二份 functional map,在和主管討論的過程中,發現客戶並不需要有搜尋的功能,雖然他們一開始說「我們要像 Google Photo 那樣的東西!」而且他們伺服器並沒有串流系統,因此我不需要製作線上播放的功能。於是我再簡化成第二份 functional map。這時我就可以請後端的同事設計 API 了。

https://ithelp.ithome.com.tw/upload/images/20171207/20091606H0zFgANvpq.png


上一篇
User Stories
下一篇
Flow Chart & UI Flow
系列文
如何在前端開發流程中加入使用者經驗設計 - 以線上相簿為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言